<template>
  <div>
    <ul>
      <li v-for="item in rows">
        {{item.name}} --
        <span :style="{color: showState(item.state).color}">{{showState(item.state).text}}</span>
      </li>
    </ul>

    <ul>
  <li v-for="item in rows">
    {{item.name}} --
    <span :style="{color: stateColor(item.state)}">{{stateText(item.state)}}</span>
  </li>
</ul>
</div>
</template>

<script>
  const rows = [
    {
    	name: '空调',
      state: 1
    },
		{
			name: '冰箱',
			state: 3
		},
		{
			name: '洗衣机',
			state: 2
		},
		{
			name: '电视',
			state: 1
		},
		{
			name: '微波炉',
			state: 2
		},
  ];

  const options = [
    {
    	value: 1,
      text: '已报修',
      color: '#0000FF',
    },
		{
			value: 2,
			text: '维修中',
			color: '#FF0000',
		},
		{
			value: 3,
			text: '已修复',
			color: '#00FF00',
		},
  ];


	export default {
		name: "MyCpn",
    data() {
			return {
				rows,
        options,
      }
    },
    methods: {
			showState(state) {
				for (const item of options) {
					if (state === item.value) {
						return item;
          }
        }
      }
    },
    computed: {
      stateColor: () => {
      	return (state) => {
					for (let item of options) {
						if (state === item.value) {
							return item.color;
            }
					}
        }
      },
      stateText: () => {
				return (state) => {
					for (let item of options) {
						if (state === item.value) {
							return item.text;
            }
					}
        }
      }
    }
	}
</script>

<style scoped>

</style>
